<template>
  <t-row>
    <t-col :span="7">
      <t-space direction="vertical">
        <t-input v-model="iconInput" placeholder="请选择图标或搜索图标" clearable @input="inputIcon"
                 @clear="clearInputIcon">
          <template #suffixIcon>
            <search-icon :style="{ cursor: 'pointer' }"/>
          </template>
        </t-input>
        <div class="list-wrapper" ref="list">
          <t-row v-for="(item, index) in allData" :key="index">
            <t-col :span="1" v-for="icon in item" :key="icon.stem" :class="icon.stem === iconInput ? 'active' : ''">
              <t-icon :name="icon.stem" size="2em" style="width: 3vw;height: 3vw;margin: 0.5vw"
                      @click="selectIcon(icon.stem)"/>
            </t-col>
          </t-row>
        </div>
      </t-space>
    </t-col>
    <t-col :span="5">
      <t-space>
        <t-space direction="vertical">
          <t-color-picker-panel v-model="colorInputCss" enable-alpha format="CSS" :color-modes="['monochrome']"
                                :recent-colors="null"
                                :show-primary-color-preview="true"/>
          <template v-if="colorInputCss">
            <div class="demo-block" :style="{backgroundColor: colorInputCss}"></div>
            <div class="demo-text-css" :style="{color: colorInputCss}">这里是演示测试文字</div>
          </template>
        </t-space>
        <t-space direction="vertical">
          <t-color-picker-panel v-model="colorInputLine" enable-alpha format="CSS" :color-modes="['linear-gradient']"
                                :recent-colors="null"
                                :show-primary-color-preview="true"/>
          <template v-if="colorInputLine">
            <div class="demo-block" :style="{backgroundImage: colorInputLine}"></div>
            <div class="demo-text-line" :style="{backgroundImage: colorInputLine}">这里是演示测试文字</div>
          </template>
        </t-space>
      </t-space>

    </t-col>
  </t-row>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {chunkArray} from "@/util/ArrayUtil.ts";
import {manifest, SearchIcon} from "tdesign-icons-vue-next";

defineOptions({
  name: 'Icon'
})

const allData = ref(chunkArray(manifest, 12));

const iconInput = ref('');

const inputIcon = () => {
  let str = iconInput.value.replace(/\s+/g, "");
  const data = str.length > 0 ? manifest.filter((item) => item.stem.includes(str)) : manifest;
  allData.value = chunkArray(data, 12)
}
const clearInputIcon = () => {
  allData.value = chunkArray(manifest, 12);
}

const colorInputLine = ref('');
const colorInputCss = ref('');

const selectIcon = (icon: string) => {
  iconInput.value = icon;
}
</script>

<style scoped lang="scss">
.list-wrapper {
  height: 50vh; /* 列表可视区域的高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  overflow-x: hidden;
  position: relative;
}

.active {
  color: var(--td-text-color-brand);
}

.demo-block {
  width: 100%;
  height: 10vh;
}

.demo-text-line {
  height: 30px;
  font-size: 2em;
  font-weight: bolder;
  color: transparent;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.demo-text-css {
  height: 30px;
  font-size: 2em;
  font-weight: bolder;
}
</style>